import { Image } from 'antd'
import { useEffect, useState } from 'react'
import { DataInfo } from './dataInfo'
import '../style.css'
const InputPage = () => {
   const [showIndex, setShowIndex] = useState(0)

  const selectItem = (index: number) => {
    setShowIndex(index)
  }

  return  <div style={{marginLeft:'20px'}}>
      {
        DataInfo?.map((item:any,index: number) => {
          return <div style={{ marginBottom: '0x' ,display:'flex'}} onClick={() => { selectItem(index) }}>
            <img
              style={{ width: '200px', height: '200px', margin: '5px', borderRadius: '8px', border: '3px solid #333' }}
              src={require(`../../../public/images/${item.imgPath}`)} />
            {/* 右侧 */}
            <div style={{ padding: '15px' , display: index === showIndex ? 'block' : 'none'}}>
              <span style={{ color: '#000', fontSize: '18px', paddingLeft: '20px' }}>{item?.title}</span>
              <span>,</span>
              <span style={{ color: '#333', fontSize: '16px' }}> {item?.des}</span>
            </div>
          </div>
        })
      }
    </div>
}
export default InputPage